<template>
    <div v-if="showBreadcrumb" class="breadcrumb">
        <a-space direction="vertical">
            <a-breadcrumb separator="/">
                <template v-for="route in breadcrumbRoutes">
                    <a-breadcrumb-item>
                        <template v-if="route.path.endsWith('/:id')">
                            {{ route.meta.title }}
                        </template>
                        <template v-else>
                            <router-link :to="route.path">{{ route.meta.title }}</router-link>
                        </template>
                    </a-breadcrumb-item>
                </template>
            </a-breadcrumb>
        </a-space>
    </div>
</template>

<script lang="ts" setup>
const route = useRoute();

const breadcrumbRoutes = computed(() => {
    logger('breadcrumbRoutes', route.matched);
    // 不返回第一个路由

    return route.matched.slice(1);
});

const showBreadcrumb = computed(() => {
    // return route.path !== '/dashboard';
    return true;
});
</script>

<style lang="css" scoped></style>